<template>
  <div class="zw-select-group">
    <el-radio-group v-model="props.modelValue[modelOption.type]">
      <slot name="radioOption">
        <el-radio :label="modelOption.allLabel">全部群聊</el-radio>
        <el-radio :label="modelOption.selectLabel">选择群聊</el-radio>
      </slot>
    </el-radio-group>
    <div v-show="props.modelValue[modelOption.type] === modelOption.selectLabel">
      <el-button @click="visabled = true">
        <span>选择群聊</span>
      </el-button>
      <div>
        <ZWGroupRender v-model="props.modelValue[modelOption.selected]" />
      </div>
    </div>
    <div v-if="showCountNumber" class="group-num-desc">
        (共选择<span class="group-num-count">{{ countNumber }}</span>个群聊)
    </div>
    <ZWSelectChatGroup
        v-model="visabled"
        :selected="props.modelValue[modelOption.selected]"
        :httpRequest="httpRequest"
        :select-disabled="props.selectDisabled"
        @submit="handleSubmit"
        @getTotal="handleGetTotal"
    />
  </div>
</template>

<script setup lang="ts">
import ZWSelectChatGroup from './ZWSelectChatGroup.vue'
import ZWGroupRender from './ZWGroupRender.vue'
import { computed, ref } from "vue"

interface ModelValue {
  type?: number,
  selected?: any[]
}
interface Option {
  type?: string,
  selected?: string,
  allLabel?: any,
  selectLabel?: any
}

interface ISelectDisabled {
    /** 禁用的key */
    key: 'ownerType' | 'selectType'
    /** 禁用的值 */
    value: any,
    /** 默认禁用后选中的值，不要和value一样就行 */
    defaultSelected: any
}

interface Props {
  modelValue: ModelValue,
  option?: Option,
  httpRequest?: Function
  showCount?: 'never' | 'auto' | 'always',
  selectDisabled: ISelectDisabled[]
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: () => ({ type: 1, selected: [] }),
  option: () => ({
    type: 'type',
    selected: 'selected',
  }),
  showCount: 'auto',
  selectDisabled: () => []
})

const emit = defineEmits(['submitAfter'])

const modelOption = computed(() => {
  return {
    type: props.option.type ?? 'type',
    selected: props.option.selected ?? 'selected',
    allLabel: props.option.allLabel ?? 1,
    selectLabel: props.option.selectLabel ?? 2
  }
})

/* ----------------------------选择群聊的数量-start---------------------------- */
/** 是否展示当前选择了多少群聊 */
const showCountNumber = computed(() => {
    if (props.showCount === 'never') {
        return false
    }

    if (props.showCount === 'always') {
        return true
    }

    return props.modelValue[modelOption.value.type] === modelOption.value.selectLabel
})

/** 当前选中的群聊 */
const countNumber = computed(() => {
    if (props.showCount === 'always' && props.modelValue[modelOption.value.type] === modelOption.value.allLabel) {
        return total.value
    }
    return props.modelValue[modelOption.value.selected].length
})
/** 群聊的总数 */
const total = ref(0)
/**
 * 获取总数
 */
const handleGetTotal = (totalNum = 0) => {
    total.value = totalNum
}

/* ----------------------------选择群聊的数量-end---------------------------- */
const visabled = ref(false)

const handleSubmit = (data) => {
    console.log('data: ', data);
    if (data.isAll) {
        props.modelValue[modelOption.value.type] = modelOption.value.allLabel
    }
    props.modelValue[modelOption.value.selected].splice(0, props.modelValue[modelOption.value.selected].length, ...data.selectedData)

  emit('submitAfter')
}
</script>

<style lang="scss" scoped>
.zw-select-group {
  flex: 0 0 1000px;
  width: 1000px;
}

.group-num-desc {
  font-size: 12px;
  color: #999;
  .group-num-count {
    color: var(--el-color-primary);
  }
}

:deep(.zw-group-render-list) {
    margin-bottom: 12px;
}
.group_popover {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
}
</style>
